import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, useNavigate, useLocationation, useLocation } from 'react-router-dom';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import Home from './pages/Home';
import MarketAnalysis from './pages/MarketAnalysis';
import PositionStrategy from './pages/PositionStrategy';
import ModelTraining from './pages/ModelTraining';

function App() {
  const [sidebarVisible, setSidebarVisible] = useState(false);
  // const [activePage, setActivePage] = useState('home');
  const navigate = useNavigate(); // 添加 useNavigate 钩子
  const location = useLocation();

    // 根据当前路径确定活动页面
  const getActivePage = () => {
    if (location.pathname.startsWith('/market')) return 'market';
    if (location.pathname.startsWith('/strategy')) return 'strategy';
    if (location.pathname.startsWith('/training')) return 'training';
    return 'home';
  };
  
   const activePage = getActivePage();
  const toggleSidebar = () => {
    setSidebarVisible(!sidebarVisible);
  };
  
  const handleNavigation = (page) => {
    // setActivePage(page);
    setSidebarVisible(page !== 'home');
    
    // 根据页面ID导航到对应路由
    switch(page) {
      case 'home':
        navigate('/');
        setSidebarVisible(false);
        break;
      case 'market':
        navigate('/market/trend');
        setSidebarVisible(true);
        break;
      case 'strategy':
        navigate('/strategy/portfolio');
        setSidebarVisible(true);
        break;
      case 'training':
        navigate('/training/algorithm');
        setSidebarVisible(true);
        break;
      default:
        navigate('/');
    }
  };

  return (
    <div className="app-container">
      <Header 
        onMenuClick={toggleSidebar} // 菜单点击事件
        onNavClick={handleNavigation} // 导航点击事件（一级） 
        activePage={activePage}
      />
      
      <div className="main-content">
        <Sidebar 
          visible={sidebarVisible} 
          activePage={activePage}
          onNavClick={(page, subpage) => {
            if (subpage) {
              navigate(`/${page}/${subpage}`);
            }
          }}
        />
        
        <div className={`content-area ${sidebarVisible ? 'with-sidebar' : ''}`}>
          <Routes>
            <Route path="/" element={<Home />} />
             {/* 市场分析路由 */}
            <Route path="/market/:subpage" element={<MarketAnalysis />} />
            <Route path="/market" element={<MarketAnalysis />} />
            
            {/* 持仓策略路由 */}
            <Route path="/strategy/:subpage" element={<PositionStrategy />} />
            <Route path="/strategy" element={<PositionStrategy />} />
            
            {/* 模型训练路由 */}
            <Route path="/training/:subpage" element={<ModelTraining />} />
            <Route path="/training" element={<ModelTraining />} />
            {/* 添加重定向确保首页正确显示 */}
            <Route path="*" element={<Home />} />
          </Routes>
        </div>
      </div>
    </div>
  );
}

// 创建包装组件以在 Router 上下文中使用 useNavigate
export default function WrappedApp() {
  return (
    <Router>
      <App />
    </Router>
  );
}